<template>
  <el-row>
    <el-col :span="24">
      <el-card>
        <el-table :data="userList.list" border style="font-size: 12px;" :cell-style="{ textAlign: 'center' }"
                  :header-cell-style="{ 'text-align': 'center' }">
          <el-table-column prop="id" label="ID" />
          <el-table-column prop="username" label="用户名"/>
          <el-table-column prop="sex" label="性别"/>
          <el-table-column prop="phone" label="电话" />
          <el-table-column prop="email" label="邮箱" />
          <el-table-column prop="realname" label="真实姓名" />
          <el-table-column prop="regTime" label="注册时间" width="160px"/>
          <el-table-column prop="idCard" label="身份证号"/>
          <el-table-column prop="money" label="余额"/>
          <el-table-column  label="状态" width="150px">
            <template #default="scope">
              <div>
                <span><el-button type="primary" round  size="small" style="margin-right: 2px" @click="selectById(scope.row.id)">切换</el-button></span>
                <span>
                  <el-tag type="primary" v-if="scope.row.status == 0">未认证</el-tag>
              <el-tag type="warning" v-if="scope.row.status == 1">已认证</el-tag>
              <el-tag type="success" v-if="scope.row.status == 2">禁用</el-tag>
              <el-tag type="danger" v-if="scope.row.status == 3">注销</el-tag>
                </span>
              </div>

            </template>
          </el-table-column>
          <el-table-column label="操作" width="120px">
            <template #default="scope">
              <el-popconfirm title="你确定要重置吗?" confirm-button-text="确定" cancel-button-text="取消"
                             @confirm="reset(scope.row.id)">
                <template #reference>
                  <el-button size="small" type="danger">重置密码</el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination background layout="prev, pager, next" :total="pageInfo.total" :page-size="pageInfo.pageSize"
                       @change="selectAll"
                       style="margin-top: 15px; display: flex; justify-content: center; align-items: center;"
                       v-model:current-page="pageInfo.pageNum"/>
      </el-card>
    </el-col>
  </el-row>


  <!--  切换状态-->
  <el-dialog v-model="updateStatusForm" title="切换状态" >
    <el-form :model="form">
      <el-radio-group v-model="updateUserStatus.status">
        <el-radio label="未认证" :value="0" size="large"/>
        <el-radio label="已认证" :value="1" size="large"/>
        <el-radio label="禁用" :value="2" size="large"/>
        <el-radio label="注销" :value="3" size="large"/>
      </el-radio-group>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="updateStatusForm = false">取消</el-button>
        <el-button type="primary" @click="updateStatus">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>


<script setup>
import {ref} from "vue";
import userApi from "@/api/userApi.js";
import {ElMessage} from "element-plus";
const addForm = ref(false)
const updateStatusForm = ref(false)
const condition = ref({
  username: null,
  status: null,
  realname: null
})
function cancel(){
  userAddList.value = {
    username:null,
    realname:null,
    sex:null,
    idCard:null,
    phone:null,
    email:null
  }
  addForm.value = false;
}
const updateUserStatus = ref({
  id:null,
  status:null
})
function selectById(id){
  userApi.selectById(id)
      .then(resp => {
        updateUserStatus.value = resp.data;
      })
  updateStatusForm.value = true;
}
function updateStatus(){
  userApi.updateStatus(updateUserStatus.value)
      .then(resp =>{
        if(resp.code == 10000){
          ElMessage.success(resp.msg);
          updateStatusForm.value = false;
          selectAll(pageInfo.value.pageNum)
        }else {
          ElMessage.error(resp.msg);
        }
      })
}
// 添加用户
const userAddList = ref({
  username:null,
  realname:null,
  sex:null,
  idCard:null,
  phone:null,
  email:null
})

//添加
function insert(){
  userApi.insert(userAddList.value)
      .then(resp => {
        if(resp.code == 10000){
          ElMessage.success(resp.msg);
          addForm.value = false;
          selectAll(pageInfo.value.pageNum)
        }else {
          ElMessage.error(resp.msg);
        }
      })
}
//分页
const pageInfo = ref({
  pageSize: 0,
  pages: 0,
  pageNum: 0
});
const userList = ref([])
function selectAll(pageNum){
  userApi.selectAll(condition.value, pageNum, 5)
      .then(resp => {
        console.log(resp.data,1111)
        userList.value = resp.data;
        pageInfo.value = resp.data;
      })
}
selectAll(1)

//重置密码
function reset(id){
  userApi.reset(id)
      .then(resp => {
        if(resp.code == 10000){
          ElMessage.success(resp.msg)
          selectAll(pageInfo.value.pageNum)
        }else {
          ElMessage.error(resp.msg)
        }

      })
}
</script>


<style scoped>

</style>